<template lang="">
    <div class="myInfo">
        <div class="userInfo">
            <el-descriptions class="margin-top" title="个人信息" :column="3"  border>
                <template slot="extra">
                    <el-button @click="dialog = true" type="primary" size="small"><i class="el-icon-edit"></i> 编辑</el-button>
                </template>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    用户名
                </template>
                {{userInfo.username}}
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    手机号
                </template>
                {{userInfo.telnumb}}
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-message"></i>
                    邮箱
                </template>
                {{userInfo.email}}
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i v-if="userInfo.gender=='男'" class="el-icon-male"></i>
                    <i v-if="userInfo.gender=='女'" class="el-icon-female"></i>
                    性别
                </template>
                {{userInfo.gender}}
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-medal"></i>
                    积分
                </template>
                {{userInfo.score}}
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-discount"></i>
                    账户余额
                </template>
                {{userInfo.balance}}
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    认证状态
                </template>
                <el-tag size="small">{{userInfo.approveState}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-time"></i>
                    注册时间
                </template>
                {{userInfo.registerTime}}
                </el-descriptions-item>
                
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-warning-outline"></i>
                    账号状态
                </template>
                <el-tag size="small">{{userInfo.status}}</el-tag>
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="main">
            <div class="pic">
                <el-image 
                style="width: 150px; height: 150px"
                :src="userInfo.picture" 
                >
            </el-image>
            </div>
          <div class="btn">
            <el-upload
                class="avatar-uploader"
                action="http://localhost:10010/user/avatar"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <el-button size="small" type="primary">更换头像</el-button>
            </el-upload>
            <el-button class="baocun" @click="savePic()" size="small" type="success">保存头像</el-button>
          </div>
        </div>
        <el-drawer
            title="编辑信息"
            :before-close="handleClose"
            :visible.sync="dialog"
            direction="ltr"
            custom-class="demo-drawer"
            ref="drawer"
            >
            <div class="demo-drawer__content">
                <el-form :model="form" style="width:80%;">
                    <el-form-item label="用户名" :label-width="formLabelWidth">
                        <el-input v-model="form.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" :label-width="formLabelWidth">
                        <el-select v-model="form.gender">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="邮箱" :label-width="formLabelWidth">
                        <el-input readOnly v-model="form.email" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机" :label-width="formLabelWidth">
                        <el-input v-model="form.telnumb" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer footerCss">
                    <el-button style="width:40%;" @click="cancelForm">取 消</el-button>
                    <el-button style="width:40%;" type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '保存' }}</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import { getUser,update } from "../../../utils/user.js";
export default {
    data() {
        return {
            params: {
                userId: "",
                token: "",
            },
            userInfo: {}, 
            dialog: false,
            loading: false,
            form: {},
            formLabelWidth: '100px',
        };
    },
    created() {
        this.params.userId = localStorage.getItem("user");
        this.params.token = this.$cookies.get("token");
        this.getUserInfo();
    },
    methods: {
        getUserInfo() {
            getUser(this.params).then((res) => {
                if (res.data.code == 200) {
                    this.userInfo = res.data.data;
                    this.form= res.data.data;
                }
            });
        },

        //更换头像
        savePic(){
            update(this.userInfo,this.params).then((res) => {
                if (res.data.code == 200) {
                    this.$message.success(res.data.msg);
                    this.getUserInfo();
                }
            });
        },

        saveUpdate(){
            update(this.form,this.params).then((res) => {
                if (res.data.code == 200) {
                    this.$message.success(res.data.msg);
                    this.getUserInfo();
                }
            });
        },

        handleAvatarSuccess(res, file) {
            this.userInfo.picture=res.data;
        },

        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        //编辑信息
        handleClose(done) {
            if (this.loading) {
                return;
            }
            this.$confirm('确定要修改信息吗？')
                .then(_ => {
                    this.loading = true;
                    this.timer = setTimeout(() => {
                        done();
                        setTimeout(() => {
                             this.loading = false;
                        }, 400);
                    }, 1000);
                    this.saveUpdate();
                }) .catch(_ => {});
        },
        cancelForm() {
        this.loading = false;
        this.dialog = false;
        }
    },
};
</script>
<style lang="less" scoped>
.footerCss {
    margin-left: 5%;
}
  .main {
  width: 100%;
  display: flex;
 }
 .baocun {
    margin-top: 60px;
 }
  .pic {
    padding: 40px;
    flex: 1;
  }
  .btn {
    padding-top: 50px;
    flex: 5;
  }
@import url("./index.less");
</style>